<template>
    <div class="page-wrapper">
        <div class="page-wrapper__body is-list">
            <div class="page-container">
                <div class="grid-container">
                    <el-row class="grid-table-tool">
                        <el-col :span="18" class="tool-action">
                            <el-input v-model="params.key" placeholder="场次名称/学校名称" @keyup.enter="onSearch" style="width:400px;margin-right:10px;"></el-input>
                            <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
                        </el-col>
                        <el-col :span="6" class="tool-pagination">
                            <el-button type="primary" icon="el-icon-plus" @click="onUpdate(0)">新增</el-button>
                        </el-col>
                    </el-row>
                    <el-table border class="grid-table" :data="resp.dataList" width="100%">
                        <el-table-column type="index" align="center" width="50"></el-table-column>
                        <el-table-column prop="" label="操作" align="center" width="60">
                            <template slot-scope="scope">
                                <a href="#" title="删除" style="display: none" @click="onDelete(scope.row.id)"><i class="el-icon-delete"></i></a>
                                <a href="#" title="修改" @click="onUpdate(scope.row.id)"><i class="el-icon-edit"></i></a>
                            </template>
                        </el-table-column>
                        <el-table-column prop="sceneName" label="场次名称" ></el-table-column>
                        <el-table-column prop="topic" label="主题"></el-table-column>
                        <el-table-column prop="cityName" label="城市" width="100"></el-table-column>
                        <el-table-column prop="schoolName" label="院校/地点" ></el-table-column>
                        <el-table-column prop="fieldName" label="地址" ></el-table-column>
                        <el-table-column prop="useDate" label="活动日期" >
                            <template slot-scope="scope">
                                {{moment(scope.row.useDate).format('YYYY-MM-DD')}}
                                {{moment(scope.row.beginTime).format('HH:mm')}} -
                                {{moment(scope.row.endTime).format('HH:mm')}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="liveUrl" label="直播地址" show-overflow-tooltip ></el-table-column>
                        <el-table-column prop="playbackUrl" label="回放地址" show-overflow-tooltip ></el-table-column>
                    </el-table>
                    <el-row class="grid-table-tool">
                        <el-col :span="12" class="tool-action">&nbsp;</el-col>
                        <el-col :span="12" class="tool-pagination">
                            <el-pagination background v-if="resp.total>params.pageSize"
                                           @size-change="handleSizeChange"
                                           @current-change="handleCurrentChange"
                                           :current-page="params.page"
                                           :page-sizes="[10,15, 20, 30, 40]"
                                           :page-size="params.pageSize"
                                           layout="total, sizes, prev, pager, next"
                                           :total="resp.total">
                            </el-pagination>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import moment from 'moment';
    import {findList, deleteOne} from '../../api/bmw/bmwScene'

    export default {
        name: "sceneList",
        data(){
            return{
                resp: {
                    dataList: [],
                    total: 0
                },
                params: {
                    key: '',
                    sort: '',
                    order: '',
                    page: 1,
                    pageSize: 15,
                },
                isLoading: false,
            }
        },
        methods: {
            moment,
            handleSizeChange(val) {
                this.params.pageSize = val;
                this.onSearch();
            },
            handleCurrentChange(val) {
                this.params.page = val;
                this.loadData();
            },
            async onDelete(id){
                this.isLoading = true;
                let resp = await deleteOne(id);
                if (!this.qUtil.validResp(resp)) {
                    this.$message({type: 'error', message: '数据删除失败!', showClose: true});
                    this.isLoading = false;
                    return false;
                }
                this.$message({type: 'success', message: '数据删除成功!', showClose: true});
                this.isLoading = false;
                this.loadData();
            },
            onUpdate(id){
                this.$router.push({name:'BMWSceneForm', query:{id : id}})
            },
            onSearch(){
                this.params.page = 1;
                this.loadData();
            },
            async loadData(){
                this.isLoading = true;
                let resp = await findList(this.params)
                if (!this.qUtil.validResp(resp)) {
                    this.$message({type: 'error', message: '数据加载失败!', showClose: true});
                    this.isLoading = false;
                    return false;
                }
                this.isLoading = false;
                this.resp.dataList = resp.data.dataList;
                this.resp.total = resp.data.total;
            }
        },
        mounted(){
            this.loadData();
        }
    }
</script>

<style scoped>

</style>